<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="{{url_for('static',filename ='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{url_for('static',filename ='font-awesome/css/font-awesome.css') }}" rel="stylesheet">
    <link href="{{url_for('static',filename ='css/animate.css') }}" rel="stylesheet">
    <link href="{{url_for('static',filename ='css/style.css') }}" rel="stylesheet">
    <link href="{{url_for('static',filename ='css/plugins/iCheck/custom.css') }}" rel="stylesheet">

        <style>
        .captcha_contain {
            width: 300px;
            height: 30px;
            display: flex;

        }

        .captcha_input {
            width: 250px;
            height: 30px;
            color: black;
            background-color: white;

            display: flex;
            flex: 5;
        }

        .captcha_btn {
            width: 50px;
            height: 30px;
            color: white;
            background-color: #007bff;
            display: flex;
            flex: 2;
        }

        .custom-checkbox:checked+.i::before {
            background-color: #007bff;
            /* 蓝色背景颜色 */
        }

    </style>

</head>
<body class="gray-bg">

    <div class="middle-box text-center loginscreen   animated fadeInDown">
        <div>

            <h3>欢迎注册XHDL!</h3>
            <p>创建一个XHDL新账户</p>
            <form class="m-t" role="form" action="{{ url_for('auth.register') }}" method="POST">
                <div class="form-group">
                    <input name='email' type="text" class="form-control" placeholder="请输入邮箱" required="">
                </div>
                <div class="form-group">
                    <div class="captcha_contain">
{#                        <input type="text" class="form-control" name="captcha">#}
                        <input name="email_captcha" type="text" class="form-control captcha_input" placeholder="请输入验证码" >
                        <button id="mail-captcha" class="form-control captcha_btn">获取验证码</button>
                    </div>
                </div>
                <div class="form-group">
                    <input name="username" type="text" class="form-control" placeholder="请输入用户名" required="">
                </div>
                <div class="form-group">
                    <input name="password" type="password" class="form-control" placeholder="请输入密码" required="">
                </div>
                <div class="form-group">
                    <input name="password_confirm" type="password" class="form-control" placeholder="请再次输入密码" required="">
                </div>
                <div class="form-group text-left">
                    <div class="checkbox i-checks">
                        <label class="no-padding">
                            <input type="checkbox"><i></i> 我同意注册协议</label>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary block full-width m-b">注 册</button>

                <p class="text-muted text-center"><small>已经有账户了？</small><a href="{{ url_for('auth.login') }}">点此登录</a>
                </p>

            </form>
        </div>
    </div>


    <!-- Mainly scripts -->
    <script src="{{ url_for('static', filename='js/jquery-2.1.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/register.js') }}"></script>
    <!-- iCheck -->
    <script src="{{ url_for('static', filename='js/plugins/iCheck/icheck.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });
    </script>


</body>
</html>